<template>
  <div class="allCivil">
    <div class="header">
      <div class="titleContainer">
        <img :src="customerLogo || '../../assets/home/governmentIcon.png'" @click="handleLogoClick" />
        <span class="title" @click="handleLogoClick"> {{ customerDesc }} </span>
      </div>
      <div class="mine" @click.stop="handleMine" v-if="from!='ylIndex'">
        <span>我的</span>
        <img class="avator" src="https://img3.job1001.com/data_center/mine/avator.png" alt="" />
      </div>
    </div>
    <div class="contentContainer">
      <div class="main">
        <div class="topNav">
          <div class="topNavItem">
            <div class="backBtn" title="返回" @click="handleBackBtnClick">
              <img :src="backBtn" alt="" />
            </div>
            <div class="navPositionNameBox">
              <span class="departName">{{ depart }}</span>
              <span class="count">发布岗位{{ jobNum }}个</span>
              <span class="count">招录人数{{ jobPeopleNum }}人</span>
            </div>
          </div>
        </div>
        <div class="mainContent" v-loading="loading">
          <el-scrollbar style="height: 100%">
            <div class="content">
              <el-table :data="tableData" tooltip-effect="light" style="width: 100%"
                :header-cell-style="{ background: '#F4F4F6', color: '#6C7481' }">
                <el-table-column prop="depart" label="部门名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="jobName" label="岗位名称" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="jobPeopleNum" label="招录人数" width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="peopleSubmitNum" label="报考人数" width="200" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="passScore" label="入面分数线" width="200" show-overflow-tooltip>
                  <template slot-scope="scope">
                    <span v-if="
                        scope.row.passScore != '0' ||
                        scope.row.passScore != '0.0'
                      ">
                      {{ scope.row.passScore }}
                    </span>
                    <span v-else> - </span>
                  </template>
                </el-table-column>
                <el-table-column prop="major" label="专业" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="eduDesc" label="学历" width="240" show-overflow-tooltip>
                </el-table-column>
                <el-table-column prop="name" align="center" label="岗位详情" width="160">
                  <template slot-scope="scope">
                    <el-button type="text" class="detailBtn" @click="handleDetailBtnClick(scope.row)">
                      查看
                    </el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div class="pager" v-if="tableData.length">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="pData.currentPage" :page-sizes="pData.pageSizes" :page-size="pData.pageSize"
                  :layout="pData.layout" :total="pData.total" background></el-pagination>
              </div>
            </div>
          </el-scrollbar>
        </div>
      </div>
    </div>
    <freeDialog />
  </div>
</template>

<script>
import freeDialog from "@/components/freeDialog";
import pagination from "@/mixin/pagination";
import { getCivilPositionList } from "@/api/civil-job";
import backBtn from "@/icons/backBtn.png";
import ztLogo from "@/assets/home/zt-logo.png";
import governmentIcon from "@/assets/home/governmentIcon.png";

export default {
  mixins: [pagination,],
  name: "Detail",
  components: {freeDialog},
  data() {
    return {
      backBtn,
      ztLogo,
      governmentIcon,
      wxImg: "",
      showGlass: false,
      loading: false,
      SecretKey: "",
      pageTitle: "",
      token: "",
      isSuperToken: false,
      customerDesc: "",
      customerLogo: "",
      tableData: [],
      year: "",
      depart: "",
      jobNum: "",
      jobPeopleNum: "",
      regionId: "",
    };
  },
  mounted() {
    this.SecretKey = this.$route.query.SecretKey;
  },
  created() {
    //特殊情况(from=ylIndex)下不展示mineAvatar组件
    this.from = sessionStorage.getItem("from")||this.$route.query.from;
    this.year = this.$route.query.year;
    this.depart = this.$route.query.depart;
    this.jobNum = this.$route.query.jobNum;
    this.jobPeopleNum = this.$route.query.jobPeopleNum;
    this.regionId = this.$route.query.regionId;
    if (localStorage.getItem("customerDesc")) {
      this.customerDesc = localStorage.getItem("customerDesc");
      document.title = this.customerDesc;
    }

    const extraJson = localStorage.getItem("extra");
    if (extraJson) {
      const extra = JSON.parse(extraJson);
      this.customerLogo = extra.icon ? extra.icon : this.governmentIcon;
    } else {
      this.customerLogo = this.governmentIcon;
    }

    const superToken = localStorage.getItem("superToken");
    if (superToken) {
      this.pageTitle = localStorage.getItem("customerDesc");
    } else {
      this.pageTitle = "职神籍";
    }

    this.getData();
  },
  methods: {
    handleDetailBtnClick(item) {
      let routeData = this.$router.resolve({
        path: `/civil-job-detail?id=${item.id}&year=${this.year}&from=${this.from}`,
      });
      window.open(routeData.href, "_blank");
    },
    getData() {
      this.loading = true;
      const params = {
        year: this.year,
        depart: this.depart,
        regionLevel: 0,
        regionId: this.regionId ? +this.regionId : 100000,
        pageNo: this.pData.currentPage,
        pageSize: this.pData.pageSize,
      };
      getCivilPositionList(params)
        .then((res) => {
          if (res.code == 200) {
            res.data.forEach((item) => {
              item.showBtn = false;
            });
            this.tableData = res.data;
            this.pData.total = res.pageparam.sums;
          } else {
            console.log(res);
          }
        })
        .catch((e) => {
          console.log(e);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    handleBackBtnClick() {
      if (this.from == "ylIndex") {
        this.$router.push({
          path: "/all-civil-job",
          query: {
          year: this.year,
          from:"ylIndex"
          },
        });
        return;
      }
      this.$router.push({
        path: "/all-civil-job",
        query: {
          year: this.year,
          from:"ylIndex"
        },
      });
    },
    handleLogoClick() {
      if (this.from == "ylIndex") {
        this.$router.push({
          path: "/freehome",
          query: {
            from: "ylIndex",
          },
        });
        return;
      }
      this.$store.dispatch("settings/changeSetting", {
        key: "showType",
        value: "position",
      });
      this.$router.push({
        path: "/position",
        query: {
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName || "",
        },
      });
    },
    handleMine() {
      this.$router.push({
        path: "/mine",
        query: {
          id: this.$route.query.id,
          superToken: this.$route.query.superToken || "",
          SecretKey: this.$route.query.SecretKey || "",
          customerName: this.$route.query.customerName,
        },
      });
    },
  },
};
</script>
<style scoped lang="scss">
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden;
}
.allCivil {
  position: relative;
  background: #f7f8fa;
  height: 100%;
  min-width: 1190px;
  .glass {
    width: 100%;
    height: 100%;
    background: rgba(22, 22, 22, 0.6);
    backdrop-filter: blur(3px);
    position: absolute;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-direction: row;
    justify-content: center;
    padding-top: 20%;
    .wx-card {
      width: 361px;
      height: 316px;
      background-image: url("../../assets/home/wx-bg.png");
      background-size: 100% 100%;
      padding: 23px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .title {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 20px;
        img {
          width: 28px;
          height: 28px;
        }
        span {
          font-weight: 800;
          font-size: 16px;
          color: #141416;
        }
      }
      .desc {
        margin-bottom: 19px;
      }
      .wx {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        margin-bottom: 15px;
        background-color: #ffffff;
        padding: 3px 3px 4px 4px;
        border-radius: 4px;
        img {
          width: 148px;
          height: 148px;
        }
      }
      .name {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 15px;
        color: #333333;
      }
    }
  }
  .header {
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 57px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(7px);
    background-size: 100% 57px;
    z-index: 2;
    .titleContainer {
      display: flex;
      align-items: center;
      padding-left: 25px;
      color: #fff;
      font-size: 17px;
      line-height: 24px;
      letter-spacing: 2px;
      .title {
        font-family: "title-home-font";
        cursor: pointer;
        max-width: 26vw;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-inline-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1;
      }
      img {
        height: 24px;
        width: auto;
        cursor: pointer;
        margin-right: 5px;
      }
    }
    .mine {
      color: #fff;
      cursor: pointer;
      display: flex;
      align-items: center;
      font-size: 14px;
      .avator {
        height: 24px;
        width: 24px;
        margin: 0 24px 0 8px;
        border-radius: 50%;
        overflow: hidden;
      }
    }
  }
  .contentContainer {
    width: 100%;
    height: 100%;
    padding-top: 52px;
    display: flex;
    background: url("../../assets/home/back.png") no-repeat;
    flex-direction: column;
    background-size: 100.1% auto;
    align-items: center;
    min-width: 1375px;
    .experienceTime {
      height: 28px;
      z-index: 3;
      position: absolute;
      top: 16px;
      right: 110px;
      display: flex;
      flex-direction: row;
      align-items: center;
      color: #ffffff;
      .time {
        margin-left: 9px;
        display: flex;
        flex-direction: row;
        align-items: center;
        .time-box {
          width: 56px;
          height: 28px;
          padding: 4px 8px; /* 内边距 */
          border: 1px solid #5e6d84; /* 边框 */
          border-radius: 4px; /* 圆角 */
          box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); /* 阴影 */
          margin: 0 4px;
          font-family: D-DIN-PRO-500-Medium;
          font-weight: bold;
          font-size: 15px;
          color: #ffffff;
        }
        .dot {
          height: 18px;
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          div {
            width: 4px;
            height: 4px;
            background: #ffffff;
            border-radius: 50%;
          }
        }
      }
    }
    .main {
      height: calc(100% - 25px);
      position: relative;
      border-radius: 20px;
      margin-top: 24px;
      background-color: white;
      width: calc(100vw - 34px);
      min-width: 1375px;
      display: flex;
      flex-direction: column;
      .topNav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 60px;
        padding: 0 16px;
        .topNavItem {
          display: flex;
          width: 100%;
        }
        .topNavItemRight {
          display: flex;
          align-items: center;
          padding-right: 65px;
        }
        .backBtn {
          width: 36px;
          height: 36px;
          margin-right: 16px;
          cursor: pointer;
          img {
            width: 36px;
            height: 36px;
          }
        }
        .navPositionNameBox {
          font-weight: 600;
          color: #222222;
          line-height: 30px;
          padding: 3px 16px 0 24px;
          margin: 0 -16px 0 -23px;
          width: 100%;
          border-bottom: 1px solid #cfd8f5;
          .departName {
            font-size: 22px;
            color: #222222;
            margin-right: 14px;
          }
          .count {
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-right: 10px;
          }
        }
      }
      .mainContent {
        width: 100%;
        height: calc(100% - 60px);
        box-shadow: 0px 24px 32px -22px #d7e3f8 inset;
        padding: 24px 0 0 24px;
        .content {
          margin-right: 24px;
          .pager {
            display: flex;
            justify-content: flex-end;
            margin: 24px 0;
          }
        }
      }
    }
  }
}
</style>
